<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>物流详情</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f8f9fa;
        }
        .status-bar {
            height: 44px;
            background: rgba(248, 249, 250, 0.95);
            backdrop-filter: blur(20px);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
        }
        .nav-bar {
            height: 44px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 16px;
            position: fixed;
            top: 44px;
            left: 0;
            right: 0;
            z-index: 99;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
        }
        .logistics-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            padding: 20px;
            color: white;
            margin: -4px -4px 20px -4px;
        }
        .tracking-timeline {
            position: relative;
            padding-left: 30px;
        }
        .tracking-timeline::before {
            content: '';
            position: absolute;
            left: 15px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e5e7eb;
        }
        .timeline-item {
            position: relative;
            padding-bottom: 24px;
            background: white;
            margin: 16px;
            border-radius: 12px;
            padding: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .timeline-dot {
            position: absolute;
            left: -46px;
            top: 20px;
            width: 16px;
            height: 16px;
            background: white;
            border: 3px solid #e5e7eb;
            border-radius: 50%;
            z-index: 2;
        }
        .timeline-dot.active {
            border-color: #10B981;
            background: #10B981;
        }
        .timeline-dot.current {
            border-color: #3B82F6;
            background: #3B82F6;
            animation: pulse 2s infinite;
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.1); }
        }
        .logistics-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin: 16px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .status-card {
            background: linear-gradient(135deg, #10B981, #059669);
            color: white;
            border-radius: 12px;
            padding: 20px;
            margin: 16px;
            text-align: center;
        }
        .courier-info {
            background: #F0F9FF;
            border: 1px solid #0EA5E9;
            border-radius: 12px;
            padding: 16px;
            margin: 16px;
        }
        .map-placeholder {
            background: #f8fafc;
            border: 2px dashed #cbd5e0;
            border-radius: 12px;
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #718096;
            margin: 16px;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- 状态栏 -->
    <div class="status-bar">
        <div class="text-sm font-semibold">9:41</div>
        <div class="flex items-center space-x-1">
            <i class="fas fa-signal text-xs"></i>
            <i class="fas fa-wifi text-xs"></i>
            <div class="w-6 h-3 border border-black rounded-sm">
                <div class="w-4 h-2 bg-green-500 rounded-sm m-0.5"></div>
            </div>
        </div>
    </div>

    <!-- 导航栏 -->
    <div class="nav-bar">
        <div class="flex items-center">
            <button onclick="goBack()" class="mr-3">
                <i class="fas fa-chevron-left text-gray-600 text-lg"></i>
            </button>
            <h1 class="text-lg font-semibold text-gray-900">物流详情</h1>
        </div>
        <div class="flex items-center space-x-4">
            <button onclick="refreshLogistics()" class="text-blue-600">
                <i class="fas fa-sync-alt"></i>
            </button>
            <button onclick="shareLogistics()" class="text-gray-600">
                <i class="fas fa-share-alt"></i>
            </button>
        </div>
    </div>

    <!-- 主要内容 -->
    <div class="pt-24 pb-6">
        <!-- 物流状态卡片 -->
        <div class="status-card">
            <div class="text-2xl mb-2">
                <i class="fas fa-truck"></i>
            </div>
            <div class="text-lg font-bold mb-1">运输中</div>
            <div class="text-sm opacity-90">您的包裹正在派送途中</div>
            <div class="text-sm opacity-75 mt-2">预计今日 18:00 前送达</div>
        </div>

        <!-- 快递员信息 -->
        <div class="courier-info">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mr-3">
                        <i class="fas fa-user text-blue-600 text-xl"></i>
                    </div>
                    <div>
                        <div class="font-semibold text-gray-900">李师傅 (配送员)</div>
                        <div class="text-sm text-gray-600">顺丰速运</div>
                    </div>
                </div>
                <button onclick="callCourier()" class="bg-blue-500 text-white px-4 py-2 rounded-full text-sm hover:bg-blue-600 transition-colors">
                    <i class="fas fa-phone mr-1"></i>联系快递员
                </button>
            </div>
        </div>

        <!-- 物流信息卡片 -->
        <div class="logistics-card">
            <div class="flex items-center justify-between mb-4">
                <h3 class="text-lg font-bold text-gray-900">物流信息</h3>
                <span class="text-sm text-gray-500" id="lastUpdate">2分钟前更新</span>
            </div>
            
            <div class="grid grid-cols-2 gap-4 mb-4">
                <div>
                    <div class="text-sm text-gray-500">运单号</div>
                    <div class="font-mono text-gray-900 font-medium" id="trackingNumber">SF1234567890</div>
                </div>
                <div>
                    <div class="text-sm text-gray-500">承运商</div>
                    <div class="text-gray-900 font-medium">顺丰速运</div>
                </div>
            </div>
            
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <div class="text-sm text-gray-500">寄件地</div>
                    <div class="text-gray-900">深圳市南山区</div>
                </div>
                <div>
                    <div class="text-sm text-gray-500">目的地</div>
                    <div class="text-gray-900">北京市朝阳区</div>
                </div>
            </div>
        </div>

        <!-- 实时位置 (地图占位符) -->
        <div class="map-placeholder">
            <div class="text-center">
                <i class="fas fa-map-marker-alt text-4xl mb-2"></i>
                <div class="font-medium">实时位置追踪</div>
                <div class="text-sm">包裹当前位置：北京朝阳分拣中心</div>
            </div>
        </div>

        <!-- 物流时间轴 -->
        <div class="logistics-card">
            <h3 class="text-lg font-bold text-gray-900 mb-4">物流轨迹</h3>
            
            <div class="tracking-timeline">
                <!-- 当前状态 -->
                <div class="timeline-item relative">
                    <div class="timeline-dot current"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="font-semibold text-gray-900 mb-1">
                                <i class="fas fa-truck text-blue-600 mr-2"></i>
                                【北京朝阳区】快件正在派送途中，快递员：李师傅，联系电话：138****8888
                            </div>
                            <div class="text-sm text-gray-500">2024-03-15 14:30:25</div>
                        </div>
                    </div>
                </div>

                <!-- 历史记录 -->
                <div class="timeline-item relative">
                    <div class="timeline-dot active"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="font-medium text-gray-900 mb-1">
                                <i class="fas fa-warehouse text-green-600 mr-2"></i>
                                【北京朝阳分拣中心】快件已从分拣中心发出
                            </div>
                            <div class="text-sm text-gray-500">2024-03-15 08:20:15</div>
                        </div>
                    </div>
                </div>

                <div class="timeline-item relative">
                    <div class="timeline-dot active"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="font-medium text-gray-900 mb-1">
                                <i class="fas fa-box text-green-600 mr-2"></i>
                                【北京朝阳分拣中心】快件已到达分拣中心
                            </div>
                            <div class="text-sm text-gray-500">2024-03-15 03:45:30</div>
                        </div>
                    </div>
                </div>

                <div class="timeline-item relative">
                    <div class="timeline-dot active"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="font-medium text-gray-900 mb-1">
                                <i class="fas fa-plane text-green-600 mr-2"></i>
                                【天津转运中心】快件已发出，正在运往下一站
                            </div>
                            <div class="text-sm text-gray-500">2024-03-14 22:15:45</div>
                        </div>
                    </div>
                </div>

                <div class="timeline-item relative">
                    <div class="timeline-dot active"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="font-medium text-gray-900 mb-1">
                                <i class="fas fa-warehouse text-green-600 mr-2"></i>
                                【天津转运中心】快件已到达转运中心
                            </div>
                            <div class="text-sm text-gray-500">2024-03-14 18:30:20</div>
                        </div>
                    </div>
                </div>

                <div class="timeline-item relative">
                    <div class="timeline-dot active"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="font-medium text-gray-900 mb-1">
                                <i class="fas fa-shipping-fast text-green-600 mr-2"></i>
                                【深圳南山区】快件已从寄件网点发出
                            </div>
                            <div class="text-sm text-gray-500">2024-03-14 16:45:10</div>
                        </div>
                    </div>
                </div>

                <div class="timeline-item relative">
                    <div class="timeline-dot active"></div>
                    <div class="flex items-start justify-between">
                        <div class="flex-1">
                            <div class="font-medium text-gray-900 mb-1">
                                <i class="fas fa-check-circle text-green-600 mr-2"></i>
                                【深圳南山区】商家已交寄，等待收件
                            </div>
                            <div class="text-sm text-gray-500">2024-03-14 15:20:00</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 订单信息 -->
        <div class="logistics-card">
            <h3 class="text-lg font-bold text-gray-900 mb-4">订单信息</h3>
            
            <div class="flex items-center mb-4">
                <img src="https://images.unsplash.com/photo-1593642702821-c8da6771f0c6?w=100&h=100&fit=crop" 
                     class="w-16 h-16 rounded-lg mr-4" alt="商品">
                <div class="flex-1">
                    <div class="font-semibold text-gray-900">MacBook Air M2 13.6英寸</div>
                    <div class="text-sm text-gray-500">午夜色 256GB x1</div>
                    <div class="text-lg font-bold text-red-500">¥8,999</div>
                </div>
            </div>
            
            <div class="grid grid-cols-1 gap-3 pt-3 border-t border-gray-100">
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">订单号：</span>
                    <span class="text-gray-900 font-mono">2024031401</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">收件人：</span>
                    <span class="text-gray-900">张小明</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">收件地址：</span>
                    <span class="text-gray-900 text-right">北京市朝阳区xxx路xxx号</span>
                </div>
                <div class="flex justify-between text-sm">
                    <span class="text-gray-500">联系电话：</span>
                    <span class="text-gray-900">138****8888</span>
                </div>
            </div>
        </div>

        <!-- 操作按钮 -->
        <div class="mx-4 mt-6">
            <div class="grid grid-cols-2 gap-3">
                <button onclick="copyTrackingNumber()" class="bg-gray-100 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-200 transition-colors">
                    <i class="fas fa-copy mr-2"></i>复制运单号
                </button>
                <button onclick="complainLogistics()" class="bg-red-500 text-white py-3 rounded-xl font-medium hover:bg-red-600 transition-colors">
                    <i class="fas fa-exclamation-triangle mr-2"></i>物流投诉
                </button>
            </div>
        </div>
    </div>

    <script>
        // 获取URL参数中的订单ID
        function getOrderId() {
            const urlParams = new URLSearchParams(window.location.search);
            return urlParams.get('orderId') || '2024031401';
        }

        // 返回上一页
        function goBack() {
            window.history.back();
        }

        // 刷新物流信息
        function refreshLogistics() {
            showToast('正在刷新物流信息...');
            
            // 模拟刷新动画
            const refreshBtn = document.querySelector('[onclick="refreshLogistics()"] i');
            refreshBtn.classList.add('fa-spin');
            
            setTimeout(() => {
                refreshBtn.classList.remove('fa-spin');
                showToast('物流信息已更新');
                
                // 更新最后更新时间
                document.getElementById('lastUpdate').textContent = '刚刚更新';
            }, 1500);
        }

        // 分享物流信息
        function shareLogistics() {
            const trackingNumber = document.getElementById('trackingNumber').textContent;
            const shareText = `我的包裹 ${trackingNumber} 正在派送中，预计今日送达！`;
            
            if (navigator.share) {
                navigator.share({
                    title: '物流信息分享',
                    text: shareText,
                    url: window.location.href
                });
            } else {
                navigator.clipboard.writeText(shareText).then(() => {
                    showToast('物流信息已复制到剪贴板');
                });
            }
        }

        // 联系快递员
        function callCourier() {
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4';
            modal.innerHTML = `
                <div class="bg-white rounded-xl w-full max-w-sm p-6">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-phone text-green-600 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-900 mb-2">联系快递员</h3>
                        <div class="text-gray-600 text-sm">李师傅 - 顺丰速运</div>
                    </div>
                    
                    <div class="space-y-3">
                        <button onclick="makeCall('138****8888')" class="w-full bg-green-500 text-white py-3 rounded-xl font-medium hover:bg-green-600 transition-colors">
                            <i class="fas fa-phone mr-2"></i>拨打电话
                        </button>
                        <button onclick="sendMessage()" class="w-full bg-blue-500 text-white py-3 rounded-xl font-medium hover:bg-blue-600 transition-colors">
                            <i class="fas fa-sms mr-2"></i>发送短信
                        </button>
                        <button onclick="this.closest('.fixed').remove()" class="w-full bg-gray-200 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-300 transition-colors">
                            取消
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }

        // 拨打电话
        function makeCall(phone) {
            window.location.href = `tel:${phone}`;
        }

        // 发送短信
        function sendMessage() {
            const message = encodeURIComponent('您好，请问我的包裹什么时候能送到？谢谢！');
            window.location.href = `sms:138****8888?body=${message}`;
        }

        // 复制运单号
        function copyTrackingNumber() {
            const trackingNumber = document.getElementById('trackingNumber').textContent;
            navigator.clipboard.writeText(trackingNumber).then(() => {
                showToast('运单号已复制');
            });
        }

        // 物流投诉
        function complainLogistics() {
            const modal = document.createElement('div');
            modal.className = 'fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 px-4';
            modal.innerHTML = `
                <div class="bg-white rounded-xl w-full max-w-sm p-6">
                    <div class="text-center mb-4">
                        <div class="w-16 h-16 bg-red-100 rounded-full flex items-center justify-center mx-auto mb-3">
                            <i class="fas fa-exclamation-triangle text-red-600 text-2xl"></i>
                        </div>
                        <h3 class="text-lg font-bold text-gray-900 mb-2">物流投诉</h3>
                    </div>
                    
                    <div class="space-y-3 mb-4">
                        <div class="text-sm text-gray-600">请选择投诉原因：</div>
                        <div class="space-y-2">
                            <label class="flex items-center">
                                <input type="radio" name="complaint" value="slow" class="mr-2">
                                <span class="text-sm">配送速度慢</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="complaint" value="attitude" class="mr-2">
                                <span class="text-sm">服务态度差</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="complaint" value="damage" class="mr-2">
                                <span class="text-sm">包裹损坏</span>
                            </label>
                            <label class="flex items-center">
                                <input type="radio" name="complaint" value="other" class="mr-2">
                                <span class="text-sm">其他问题</span>
                            </label>
                        </div>
                    </div>
                    
                    <div class="flex space-x-3">
                        <button onclick="submitComplaint()" class="flex-1 bg-red-500 text-white py-3 rounded-xl font-medium hover:bg-red-600 transition-colors">
                            提交投诉
                        </button>
                        <button onclick="this.closest('.fixed').remove()" class="flex-1 bg-gray-200 text-gray-700 py-3 rounded-xl font-medium hover:bg-gray-300 transition-colors">
                            取消
                        </button>
                    </div>
                </div>
            `;
            
            document.body.appendChild(modal);
        }

        // 提交投诉
        function submitComplaint() {
            showToast('投诉已提交，我们会尽快处理');
            document.querySelector('.fixed').remove();
        }

        // 提示消息
        function showToast(message) {
            const toast = document.createElement('div');
            toast.className = 'fixed top-20 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-75 text-white px-4 py-2 rounded-lg z-50';
            toast.textContent = message;
            document.body.appendChild(toast);
            
            setTimeout(() => {
                toast.remove();
            }, 2000);
        }

        // 页面初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 根据订单ID加载对应的物流信息
            const orderId = getOrderId();
            console.log('Loading logistics for order:', orderId);
            
            // 这里可以根据订单ID调用API获取真实的物流信息
        });
    </script>
</body>
</html>